<template>
  <div >
    <el-form :model="users" ref="users" label-width="100px" class="demo-ruleForm" size="mini">

      <el-form-item label="姓名" prop="name" :rules="[
              { required: true, message: '姓名不能为空'},
              { pattern: /^[\u4E00-\u9FA5]+$/, message: '姓名必须为汉字'}, ]">
        <el-input type="name" v-model="users.name" autocomplete="off" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="工资" prop="salary" :rules="[
              { required: true, message: '工资不能为空'},
              { type: 'number', message: '工资必须为数字值'},
               ]">
        <el-input type="salary" v-model.number="users.salary" autocomplete="off" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age" :rules="[
              { required: true, message: '年龄不能为空',trigger:'blur'},
              { type: 'number', message: '年龄必须为数字值'},
               ]">
        <el-input type="age" v-model.number="users.age" autocomplete="off" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "Yemian",
  data(){
    return{
      users:{
        id:null,
        name:'',
        salary:null,
        age:null
      }
    }
  },
  props: ['formName', 'fromURL'],
  mounted() {
    if (this.fromURL === 'add') {


      let id = localStorage.getItem('id')
      if (id) {
        this.users.id = parseInt(id) + 1
      }
      localStorage.setItem('id', this.users.id)

    } else if (this.fromURL === 'update') {
      this.users = this.formName

    }
  },
  methods:{
    submit(){
      this.$refs['users'].validate((valid) => {
        if (valid) {
          this.$emit('handleSubmit', this.users)
        } else {

          return false;
        }
      });
    }

  }
}
</script>

<style scoped>

</style>